﻿<script setup lang="ts" name="EpStepForm">
import type { FormInstance } from 'element-plus'
import { isNumber } from '@/utils/is'
import { storeToRefs } from 'pinia'
import { useAppStoreWithOut } from '@/store/modules/app'

const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)

const stepFormRef = ref<FormInstance>()
const step = ref(0)
type stepFormType = {
  payeeAccount: string;
  paymentAccount: string;
  name: string;
  money: string | number;
  password: string;
}
const stepForm: stepFormType = reactive({
  payeeAccount: 'test@aliyun.com',
  paymentAccount: 'test@qq.com',
  name: 'test',
  money: 100,
  password: '123456'
})
const lookBill = () => {
  console.log('账单不存在')
}
const againStep = () => {
  step.value = 0
}
const prevStep = () => {
  step.value = 0
}
function nextStep(formEl) {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
      step.value = 1
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const loading = ref(false)
function onSubmit(formEl) {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      loading.value = true
      console.log('submit!')
      setTimeout(() => {
        loading.value = false
        step.value = 2
      }, 2000)
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const validatePayeeAccount = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入付款账户'))
  } else {
    callback()
  }
}
const validatePaymentAccount = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入收款账户'))
  } else {
    callback()
  }
}
const validateName = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入收款人姓名'))
  } else {
    callback()
  }
}
const validateMoney = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入转账金额'))
  } else {
    if (isNumber(stepForm.money)) {
      callback()
    } else {
      callback(new Error('金额只能为正数'))
    }
  }
}
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入支付密码'))
  } else {
    callback()
  }
}
const rules = reactive({
  payeeAccount: [{ validator: validatePayeeAccount, trigger: 'blur' }],
  paymentAccount: [{ validator: validatePaymentAccount, trigger: 'blur' }],
  name: [{ validator: validateName, trigger: 'blur' }],
  money: [{ validator: validateMoney, trigger: 'blur' }],
  password: [{ validator: validatePassword, trigger: 'blur' }]
})
</script>
<template>
  <PageWrap scroll>
    <el-space :size="systemConfig.space" fill direction="vertical">
      <el-card shadow="never" class="no-border no-radius">
        <el-row :gutter="systemConfig.space">
          <el-col :span="18" :offset="3">
            <el-steps :active="step" align-center finish-status="success" process-status="finish">
              <el-step title="第一步" description="填写转账信息" />
              <el-step title="第二步" description="确认转账信息" />
              <el-step title="第三步" description="完成" :status="step === 2 ? 'success' : 'wait'" />
            </el-steps>
            <div v-if="step === 0" class="step1">
              <el-form ref="stepFormRef" :model="stepForm" :rules="rules" label-width="auto" label-position="right">
                <ElFormItem label="付款账户" prop="payeeAccount" required>
                  <el-input v-model="stepForm.payeeAccount" clearable />
                </ElFormItem>
                <ElFormItem label="收款账户" prop="paymentAccount" required>
                  <el-input v-model="stepForm.paymentAccount" clearable />
                </ElFormItem>
                <ElFormItem label="收款人姓名" prop="name" required>
                  <el-input v-model="stepForm.name" clearable />
                </ElFormItem>
                <ElFormItem label="转账金额" prop="money" required>
                  <el-input v-model="stepForm.money" clearable><template #prepend>￥</template></el-input>
                </ElFormItem>
                <ElFormItem class="form-button">
                  <el-button type="primary" @click="nextStep(stepFormRef)">下一步</el-button>
                </ElFormItem>
              </el-form>
              <div class="tips">
                <h3>转账到支付宝</h3>
                <p>收款账户可填写手机号、支付宝账户，收款人姓名需与支付宝账户或手机号绑定一致，转账金额限定在500以内。</p>
                <h3>转账到微信</h3>
                <p>收款账户可填写手机号、微信号，收款人姓名需真实有效，与实名认证姓名一致，转账金额限定在1000以内。</p>
                <h3>转账到银行卡</h3>
                <p>收款账户需填写收款人的银行卡号，收款人姓名必须与所填写银行卡号归属人姓名一致，转账金额无限制。</p>
              </div>
            </div>
            <div v-if="step === 1" class="step2">
              <el-alert title="确认转账后，资金将直接打入对方账户，无法退回，请谨慎操作，谨防上当受骗。" type="warning" show-icon :closable="false" />
              <el-form ref="stepFormRef" :model="stepForm" :rules="rules" label-width="auto">
                <ElFormItem label="付款账户：" prop="payeeAccount">
                  {{ stepForm.payeeAccount }}
                </ElFormItem>
                <ElFormItem label="收款账户：" prop="paymentAccount">
                  {{ stepForm.paymentAccount }}
                </ElFormItem>
                <ElFormItem label="收款人姓名：" prop="name">
                  {{ stepForm.name }}
                </ElFormItem>
                <ElFormItem label="转账金额：" prop="money">
                  <strong>￥{{ stepForm.money }}</strong>
                </ElFormItem>
                <ElFormItem class="password" label="支付密码" prop="password" required>
                  <el-input v-model="stepForm.password" type="password" show-password clearable />
                </ElFormItem>
                <ElFormItem class="form-button">
                  <el-button @click="prevStep">上一步</el-button>
                  <el-button type="primary" :loading="loading" @click="onSubmit(stepFormRef)">提交</el-button>
                </ElFormItem>
              </el-form>
            </div>
            <div v-if="step === 2" class="step3">
              <el-result icon="success" title="转账成功" sub-title="预计两小时内到账">
                <template #extra>
                  <el-button type="primary" @click="againStep">再转一笔</el-button>
                  <el-button @click="lookBill">查看账单</el-button>
                </template>
              </el-result>
              <el-form ref="stepFormRef">
                <ElFormItem label="付款账户：">
                  {{ stepForm.payeeAccount }}
                </ElFormItem>
                <ElFormItem label="收款账户：">
                  {{ stepForm.paymentAccount }}
                </ElFormItem>
                <ElFormItem label="收款人姓名：">
                  {{ stepForm.name }}
                </ElFormItem>
                <ElFormItem label="转账金额：">
                  <strong>￥{{ stepForm.money }}</strong>
                </ElFormItem>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-space>
  </PageWrap>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-steps {
  margin-top: var(--el-space);
}

.el-form {
  width: 50%;
  margin: 40px auto;

  .form-button {
    :deep(.el-form-item__content) {
      justify-content: center;
    }
  }

  .el-form-item.password {
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid var(--el-border-color-light);
  }
}

.el-alert {
  width: 50%;
  margin: 40px auto 0;
}

.tips {
  width: 70%;
  padding: 5px 20px 15px;
  margin: 0 auto;
  background-color: var(--el-color-primary-light-9);
  border: 1px solid var(--el-color-primary);
  border-radius: var(--el-border-radius-base);
}

.step3 {
  .el-form {
    width: 70%;
    padding: 30px;
    background: var(--el-fill-color-light);
    border: 1px dashed var(--el-border-color);
    border-radius: var(--el-border-radius-base);
  }
}
</style>
